<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const collegeList = ref<[]>([])
onLoad(() => {
  collegeList.value = []
})

const favoritesList = ref([
  {
    name: '重庆医科大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '医药类',
  },
  {
    name: '重庆工商职业学院',
    science: '理科',
    tag: '工学 计算机类',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '专科',
    type: '综合类',
  },
  {
    name: '重庆理工大学',
    science: '文科',
    tag: '文学 新闻传播',
    icon: '',
    address: '重庆 重庆市',
    schoolClass: '公办',
    grade: '普通本科',
    type: '综合类',
  },
])

const toDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/college/collegeDetail/collegeDetail`,
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :api-loading-status="apiLoadingStatus"
    class="wh100p"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="overflow: hidden"
    @loadmorefun="getNews"
    @reload="reload"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" style="flex: 1" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text" style="flex: 2">院校查询</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 100rpx; flex: 1" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>

    <template #gBody>
      <!-- <view class="w100p" style="height: 80%; background-color: red" /> -->
      <view class="wh100p flex-column flex-start" style="background-color: white">
        <view
          class="flex-between w100p column-center"
          style="padding: 3% 0; box-sizing: border-box; height: 100rpx; background-color: #f1f1f1"
        >
          <view
            class="wh100p flex column-center relative"
            style="width: 70%; background-color: white; border-radius: 40rpx; padding: 5rpx 20rpx"
          >
            <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 4%">&#xe604;</text>
            <input
              class="input-box wh100p flex column-center"
              placeholder="请输入量表名"
              placeholder-style="color:#787878;font-size:26rpx;"
              style="border: 0px; padding: 15rpx"
            />
          </view>
          <view class="flex-center" style="width: 25%; height: 100%">
            <button
              class="flex column-center gui-button bgfff"
              style="border-color: #4687fb !important; border-radius: 40rpx"
              type="default"
            >
              <text class="gui-button-text" style="color: #4687fb; padding: 0rpx 40rpx">搜索</text>
            </button>
          </view>
        </view>
        <view class="flex w100p" style="padding: 20rpx 0; position: sticky; top: 120rpx; background-color: white; z-index: 2">
          <gui-switch-navigation
            active-direction="center"
            active-line-height="4rpx"
            active-line-width="100%"
            :is-center="true"
            :items="[
              { id: 0, name: '本土热门' },
              { id: 1, name: '热门本科' },
              { id: 2, name: '热门专科' },
              { id: 3, name: '我的收藏' },
            ]"
            :margin="20"
            padding="0rpx"
            size="25%"
            text-align="center"
            width="100%"
          />
        </view>

        <scroll-view
          class="gui-absolute-full bgfff"
          scroll-y
          style="margin-top: 24%; z-index: 1; padding: 20rpx 0rpx; box-sizing: border-box"
        >
          <view class="gap4 flex-column">
            <view
              v-for="(item, index) of [...favoritesList, ...favoritesList, ...favoritesList, ...favoritesList]"
              :key="index"
              class="flex-between column-center collegeListItem"
              @tap="toDetail(item)"
            >
              <view class="flex column-center gap18">
                <img src="#" style="border-radius: 50%; border: #9e9e9e solid 1rpx; width: 70rpx; height: 70rpx" />
                <view class="flex-column h100p flex-between gap8">
                  <text class="title" style="">{{ item.name }}</text>
                  <view class="flex" style="color: #939393; font-size: 24rpx">
                    <text class="subScience">{{ item.address }} | {{ item.schoolClass }}</text>
                  </view>
                  <view class="flex" style="color: #939393; font-size: 24rpx">
                    <text class="subScience">{{ item.grade }} | {{ item.type }}</text>
                  </view>
                </view>
              </view>
              <view class="flex-column flex-center column-center gap4" style="padding: 20rpx" @tap.stop="">
                <text class="gui-list-arrow-right gui-icons gui-color-gray-light;text-center">&#xe645;</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.collegeListItem {
  height: 200rpx;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
}

.favoriteItem {
  height: 200rpx;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  background-color: white;
}

.favoriteItem .title {
}

.select-box {
  border-radius: 20rpx;
  width: 220rpx;
  padding: 15rpx;
  font-size: 24rpx;
  box-sizing: border-box;
}
</style>
